<template>
  <div class="content-item">
    <el-tabs v-model="activeName">
      <el-tab-pane name="1"
                   label="星级寝室">
        <div>
          <span>卫生得分： >= </span>
          <el-input-number v-model="ruleForm[0].value"
                           :precision="2"
                           controls-position="right"
                           :min="0"
                           :max="100"
                           size="small"
                           style="width: 100px;"
                           type="number"></el-input-number>
          <div>
            <el-button type="primary"
                       size="small"
                       @click="save(1)">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2"
                   label="校文明寝室">
        <p>
          <span>星级寝室等级： >= </span>
          <el-select v-model="ruleForm[0].value"
                     style="width: 100px;"
                     placeholder="请选择"
                     size="small">
            <el-option v-for="item in starList"
                       :key="item.val"
                       :value="item.val"
                       :label="item.label"></el-option>
          </el-select>
        </p>
        <p>
          <span>学分绩点（一二年级）： >= </span>
          <el-input-number v-model="ruleForm[1].value"
                           :precision="2"
                           :max="100"
                           controls-position="right"
                           size="small"
                           style="width: 100px;"
                           type="number"
                           :min="0"></el-input-number>
        </p>
        <p>
          <span>学分绩点（三四年级）： >= </span>
          <el-input-number v-model="ruleForm[2].value"
                           :precision="2"
                           :max="100"
                           controls-position="right"
                           size="small"
                           style="width: 100px;"
                           type="number"
                           :min="0"></el-input-number>
        </p>
        <p>
          <span>违章违纪行为： &lt;= </span>
          <el-input-number v-model="ruleForm[3].value"
                           :max="100"
                           controls-position="right"
                           size="small"
                           style="width: 100px;"
                           type="number"
                           :min="0">
          </el-input-number>
        </p>
        <div>
          <el-button type="primary"
                     size="small"
                     @click="save(2)">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane name="3"
                   label="校标兵寝室">
        <p>
          <span>星级寝室等级： >= </span>
          <el-select v-model="ruleForm[0].value"
                     style="width: 100px;"
                     placeholder="请选择"
                     size="small">
            <el-option v-for="item in starList"
                       :key="item.val"
                       :value="item.val"
                       :label="item.label"></el-option>
          </el-select>
        </p>
        <p>
          <span>学分绩点： >= </span>
          <el-input-number v-model="ruleForm[1].value"
                           :max="100"
                           controls-position="right"
                           size="small"
                           style="width: 100px;"
                           type="number"
                           :min="0"></el-input-number>
        </p>
        <p>
          <span>违章违纪行为： &lt;= </span>
          <el-input-number v-model="ruleForm[2].value"
                           :max="100"
                           controls-position="right"
                           size="small"
                           style="width: 100px;"
                           type="number"
                           :min="0"></el-input-number>
        </p>
        <div>
          <el-button type="primary"
                     size="small"
                     @click="save(3)">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { _getRating, _changeRating } from '@api/systemManage'
export default {
  data () {
    return {
      activeName: '1',
      starDorm: {
        health: 0
      },
      ruleForm: [{ id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 }, { id: 4, value: 0 }],
      starList: [
        { val: 1, label: '一星' },
        { val: 2, label: '二星' },
        { val: 3, label: '三星' },
        { val: 4, label: '四星' },
        { val: 5, label: '五星' }
      ]
    }
  },
  methods: {
    save (num) {
      console.log(this.ruleForm[0].value)
      if (num === 1) {
        if (this.ruleForm[0].value === undefined) {
          this.$message.error('请输入卫生得分')
        } else {
          this.saveSet()
        }
      }
      if (num === 2) {
        if (this.ruleForm[1].value === undefined || this.ruleForm[2].value === undefined) {
          this.$message.error('请输入学分绩点')
        } else if (!/^[0-9]+$/.test(this.ruleForm[3].value)) {
          this.$message.error('违章违纪行为只允许输入正整数')
        } else {
          this.saveSet()
        }
      }
      if (num === 3) {
        if (this.ruleForm[1].value === undefined) {
          this.$message.error('请输入学分绩点')
        } else if (!/^[0-9]+$/.test(this.ruleForm[2].value)) {
          this.$message.error('违章违纪行为只允许输入正整数')
        } else {
          this.saveSet()
        }
      }
    },
    saveSet () {
      let parmas = []
      let num = Number(this.activeName) === 2 ? 4 : Number(this.activeName)
      for (let i = 0; i < num; i++) {
        parmas.push({
          id: this.ruleForm[i].id,
          value: this.ruleForm[i].value
        })
      }
      _changeRating(parmas).then(res => {
        this.$message.success('保存成功')
        this.getRating(this.activeName)
        console.log(res, '规则配置')
      })
    },
    getRating (ratingType) {
      _getRating(Number(ratingType)).then(res => {
        if (ratingType === '1') {
          this.ruleForm.splice(0, 1, ...res.data)
        } else if (ratingType === '2') {
          this.ruleForm = res.data
        } else {
          this.ruleForm.splice(0, 3, ...res.data)
        }
        console.log(this.ruleForm, ratingType)
      })
    }
  },
  created () {
    this.getRating(this.activeName)
  },
  watch: {
    activeName (newVal, oldVal) {
      this.getRating(newVal)
    }
  }
}
</script>
